<template>
<!--  <div class="block">-->
<!--    <span class="demonstration"> 机房/机柜一览</span><br>-->
<!--    <el-cascader-->
<!--        v-model="value"-->
<!--        placeholder="机房/机柜"-->
<!--        :options="roomAndCabinetData"-->
<!--        @change="handleChange">-->
<!--    </el-cascader>-->
<!--  </div>-->
  <div id="right_top_menu">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            text-color="white"
            @open="handleOpen"
            @close="handleClose">
          <el-menu-item>
            <template #title>
              <i class="el-icon-plus"></i>
              <span style="color: #00b0ff" @click="room_dialogFormVisible = true">添加机房</span>
            </template>
          </el-menu-item>
          <template v-for="(item,index) in roomAndCabinetData">
            <el-submenu :index="item.value" :key="index">
              <template #title>
                <i class="el-icon-house"></i>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item-group v-for="(items,index) in item.children" :key="index">
                  <el-menu-item :index="items.value" :key="index">{{items.label}}</el-menu-item>
              </el-menu-item-group>
              <el-menu-item @click="addCabinet(item.value,item.label)" style="color: #00b0ff" icon="el-icon-plus">添加机柜</el-menu-item>
              <el-menu-item @click="deleteRoom(item.value,item.label)" style="color: #ff003b" icon="el-icon-remove">删除机房</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
    </el-row>

    <div>
      <!--弹窗-创建机房-->
      <el-dialog title="创建机房" :visible.sync="room_dialogFormVisible">
        <el-form>
          <el-form-item label="机房编号" :label-width="'120px'">
            <el-input v-model="room_No" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机房名称" :label-width="'120px'">
            <el-input v-model="room_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机房描述" :label-width="'120px'">
            <el-input v-model="room_description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="room_dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createRoom(room_No,room_name,room_description)">确 定</el-button>
        </div>
      </el-dialog>
      <!--弹窗-创建机柜-->
      <el-dialog title="创建机柜" :visible.sync="cabinet_dialogFormVisible">
        <el-form>
          <el-form-item label="机柜编号" :label-width="'120px'">
            <el-input v-model="cabinet_No" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机柜名称" :label-width="'120px'">
            <el-input v-model="cabinet_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属机房" :label-width="'120px'">
            <el-input v-model="belongToRoomName" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="描述信息" :label-width="'120px'">
            <el-input v-model="cabinet_description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cabinet_dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createCabinet(cabinet_No,cabinet_name,belongToRoomNo,cabinet_description)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TopoMenu",
    data() {
      return {
        value: [],
        props: { expandTrigger: 'hover' },
        roomData: [],
        cabinetData: [],
        room_dialogFormVisible: false,//添加机房弹框
        room_No: '', // 机房编号
        room_name: '',//机房名称
        room_description: '', //机房描述
        cabinet_dialogFormVisible: false,//添加机柜弹框
        cabinet_No: '',//机柜编号
        cabinet_name: '',//机柜名称
        cabinet_description: '',//机柜描述
        roomAndCabinetData: [],//获取数据并封装
        belongToRoomName: '',//所属机房名称
        belongToRoomNo: '',//所属机房编号
        // 机房与机柜数据格式
        //   roomAndCabinetData: [
        //   {
        //     value: 'room1',
        //     label: '国家实验室',
        //     children: [
        //     {
        //       value: 'cabinet1',
        //       label: '机柜1',
        //     },
        //     {
        //       value: 'cabinet2',
        //       label: '机柜2',
        //     },
        //     ]
        // },
        // ]
    }
},
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 获取机房数据
      getRoomData() {
        this.roomData = []
        this.$axios({
          method: "post",
          url: "map/getAllEngineRoomsOrsingle.action"
        }).then((response)=> {
          this.roomData = response.data.content.result
        })
          .catch((error)=> {
            console.log(error)
          })
      },
      // 获取机柜数据
      getCabinetData(roomNo) {
        this.cabinetData = []
        this.$axios({
          method: "post",
          url: "/map/getAllCabinetBelongToRoom.action",
          data: {
            engineroom_number: roomNo
          }
        }).then((response) => {
          this.cabinetsData = response.data.content.result
        })
      },
      //获取机房和机柜数据
      getRoomAndCabinetData() {
        this.roomAndCabinetData = []
        this.roomData = []
        // 获取所有机房信息
        this.$axios({
          method: "post",
          url: "map/getAllEngineRoomsOrsingle.action"
        }).then((response)=> {
          this.roomData = response.data.content.result
          let roomData = this.roomData
          for (let i = 0; i < roomData.length; i++){
            // 通过机房编号获取每个机房的所有机柜信息
            let roomNo = this.roomData[i].engineroom_number
            let roomName = this.roomData[i].name
            this.cabinetData = []
            this.$axios({
              method: "post",
              url: "/map/getAllCabinetBelongToRoom.action",
              data: {
                engineroom_number: roomNo
              }
            }).then((response) => {
              this.cabinetData = response.data.content.result
              let cabinetData = this.cabinetData
              // 先封装children中的机柜数据
              let child = []
              for (let j = 0; j < cabinetData.length; j++){
                child.push({
                  "value": cabinetData[j].serial_number,
                  "label": cabinetData[j].name
                })
              }
              //再封装机房的数据
              this.roomAndCabinetData.push({
                "value": roomNo,
                "label": roomName,
                "children":child
                })
              })
          }
        });
      },
      //添加机房
      createRoom(num,name,des) {
        if(num == '' || name == ''){
          this.$message({
            message: '机房编号或名称不能为空！',
            type: 'error'
          });
        }else{
          this.$axios({
            method: "post",
            url:"map/createEngineRoom.action",
            data: {
              engineroom_number: num,
              name: name,
              description: des,
            }
          }).then((response)=> {
            console.log(response)
            this.room_dialogFormVisible = false; //关闭dialog
            this.room_No = '';    //清空输入框
            this.room_name = '';
            this.room_description = '';
            // 显示添加成功
            this.$message({
              message: '机房添加成功',
              type: 'success'
            });
            // 重新请求机房数据
            this.getRoomAndCabinetData();
          }).catch(()=> {
            this.room_dialogFormVisible = false;
            this.$message({
              type: 'error',
              message: '机房添加失败'
            });
          })
        }
      },
      // 创建机柜
      createCabinet(No,Name,roomNo,des) {
        if(No == '' || Name == ''){
          this.$message({
            message: '机柜编号或名称不能为空！',
            type: 'error'
          });
        }else{
          this.$axios({
            method: "post",
            url: "map/buildCabinet.action",
            data: {
              serial_number: No,
              name: Name,
              engineroom_number: roomNo,
              description: des
            }
          }).then((response) => {
            this.cabinet_dialogFormVisible = false;
            //清空输入框
            this.cabinet_No = '';
            this.cabinet_name = '';
            this.belongToRoomNo = '';
            this.belongToRoomName = '';
            this.cabinet_description = '';
            //显示添加成功信息
            this.$message({
              message: '机柜添加成功',
              type: 'success'
            });
            this.getRoomAndCabinetData()
          }).catch(()=> {
            this.cabinet_dialogFormVisible = false;
            this.$message({
              type: 'error',
              message: '机柜添加失败'
            });
          })
        }
      },
      //创建机柜响应事件并获取机房参数
      addCabinet(roomNo,roomName) {
        console.log(roomNo+'-'+roomName)
        this.belongToRoomName = roomName
        this.belongToRoomNo = roomNo
        this.cabinet_dialogFormVisible = true
      },
      // 删除机房
      deleteRoom(roomNo,roomName) {
        this.$confirm('是否确认删除机房['+roomName+']','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: "post",
            url: "map/deleteEngineRoomSingleOrMore.action",
            data:{
              engineRoomNumber:[roomNo]
            },
          }).then((response) => {
            console.log(response)
            this.$message({
              message: '机房删除成功',
              type: 'success'
            });
            this.getRoomAndCabinetData()
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '机房删除失败,机房必须为空！'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      //删除机柜
      deleteCabinet(cabinetNO) {
        this.$confirm('是否确认删除机柜'+row.name,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: "post",
            url: "map/"
          })
        })
        console.log(cabinetNO)
      },
  },
    mounted() {
      this.getRoomAndCabinetData()
    }
  };
</script>

<style scoped>
.tac {
  max-height: 80%;
}
</style>